<template>
  <view class="detail-container">
    <view class="nav-bar">
      <!-- bgColor="#f1f3f8" -->
      <u-navbar :title="title" :fixed="false" bgColor="#fff" :autoBack="true">
      </u-navbar>
    </view>
    <view class="tab-list">
      <u-tabs :list="tabList"></u-tabs>
    </view>
    <view class="content">
      <template v-for="(item, index) in list">
        <postManagementDetail
          :status="status"
          :item="item"
          @operate="operate"
        ></postManagementDetail>
      </template>
      <view :style="{ marginTop: '30px' }" v-if="list.length == 0">
        <u-empty
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          text="暂无报名人员~"
        >
        </u-empty>
      </view>
    </view>

    <globalPopup
      ref="popupRef"
      :popupTitle="popupTitle"
      @confirmClick="confirmClick"
    >
      <template #day v-if="current == 2">
        置顶到期时间：{{ timestampFormat(zhiding_at) }}
      </template>
      <template #content>
        <topPostManagement
          v-if="clickIndex == 2"
          ref="topRef"
          :radioList="radioList"
          @groupChange="groupChange"
        ></topPostManagement>
        <depositComponent
          ref="depositRef"
          v-if="clickIndex == 4"
        ></depositComponent>
        <refreshComponent
          ref="refreshRef"
          :num="sysxk"
          v-if="clickIndex == 5"
        ></refreshComponent>
      </template>
    </globalPopup>
  </view>
</template>

<script>
import postManagementDetail from "@/components/postManagement/index";
import globalPopup from "@/components/popup/index";
import topPostManagement from "@/components/postManagement/topPostManagement";
import depositComponent from "@/components/postManagement/deposit";
import refreshComponent from "@/components/postManagement/refresh";

import { request } from "@/utils/http";
import { timestampFormat } from "@/utils/day";

export default {
  components: {
    postManagementDetail,
    globalPopup,
    topPostManagement,
    depositComponent,
    refreshComponent,
  },
  data() {
    return {
      timestampFormat,
      currentIndex: 0,
      title: "",
      titleMapList: [
        "展示中",
        "待审核",
        "未通过",
        "已下架",
        "被管理员下架",
        "被管理员删除",
      ],
      tabList: [
        {
          name: "拉新",
          num: 0,
        },
        {
          name: "项目",
          num: 0,
        },
        {
          name: "网推",
          num: 0,
        },
        {
          name: "地推",
          num: 0,
        },
      ],
      radioList: [
        {
          value: 0,
          label: "版块置顶",
          num: 0,
          param: "bkzhidingsy",
          key: "bkzdk",
        },
        {
          value: 1,
          label: "首页置顶",
          num: 0,
          param: "syzhidingsy",
          key: "syzdk",
        },
      ],
      status: "",
      list: [],

      current: 0,
      flushed: null,

      sysxk: 0,

      id: null,
      zhiding_at: null,
      popupTitle: "",
      clickIndex: 0,

      postManagementMapList: [
        {
          title: "",
        },
        {
          title: "下架",
          popup: false,
          url: "/xiangmushe/shouXiajia",
        },

        {
          title: "置顶",
          popup: true,
        },
        {
          title: "刷新",
          popup: false,
          url: "/xiangmushe/shouShuaxin",
        },
        {
          title: "上押",
          popup: true,
        },
        {
          title: "设置刷新频率",
          popup: true,
        },
        {
          title: "上架",
          popup: false,
          url: "/xiangmushe/shouShangjia",
        },
      ],
      topStatus: "", //置顶状态
      userMoney: null,
    };
  },
  onLoad(options) {
    this.title = this.titleMapList[options.index];
    this.status = options.status;
    this.getPostManagementList();
    this.getNum();
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      request.post("/user/getLoginUser").then((res) => {
        console.log(Math.trunc(Number(res.data.wallet)));
        this.userMoney = Math.trunc(Number(res.data.wallet));
      });
    },
    groupChange(e) {
      this.current = e;
    },
    // 确定按钮
    confirmClick() {
      if (this.clickIndex == 2) {
        if (!this.$refs.topRef.inputValue) {
          this.$modal.msg("请输入置顶卡数量！");
          return;
        }
        const data = {
          id: this.id,
          syzhidingsy: this.current == 1 ? this.$refs.topRef.inputValue : 0,
          bkzhidingsy: this.current == 0 ? this.$refs.topRef.inputValue : 0,
        };
        if (this.topStatus == 1) {
          request.post("/xiangmushe/upZhiding", data);
        } else {
          request.post("/xiangmushe/addZhiding", data);
        }
      } else if (this.clickIndex == 4) {
        // 上押
        console.log(this.$refs.depositRef.inputValue);
        if (!this.$refs.depositRef.inputValue) {
          this.$modal.msg("请输入押金！");
          return;
        } else if (Number(this.$refs.depositRef.inputValue) < 3000) {
          this.$modal.msg("押金应该大于3000元");
          return;
        } else if (Number(this.$refs.depositRef.inputValue) >= this.userMoney) {
          this.$modal.msg("账户余额不足");
          return;
        }
        this.gotoBetOn();
      } else if (this.clickIndex == 5) {
        // 刷新卡
        this.addRefreshClick();
      }

      this.$refs.popupRef.closeClick();
      this.getNum();
      this.getPostManagementList();
    },
    //获取卡片数量
    getNum() {
      request.post("/user/getLoginUser").then((res) => {
        if (res.code == 200) {
          this.sysxk = res.data.sysxk;
          this.radioList.forEach((item) => {
            item.num = res.data[item.key];
          });
        }
      });
    },
    //获取列表
    getPostManagementList() {
      request
        .post("/xiangmushe/getMyPostsListByStatus", {
          status: this.status,
        })
        .then(({ data }) => {
          this.list = data.data;
        });
    },
    //获取用户点击
    operate(index, item) {
      this.getNum();
      this.clickIndex = index;
      const { id, zhiding_at, isiszhiding } = item;
      this.id = id;
      this.zhiding_at = zhiding_at * 1000;
      this.topStatus = isiszhiding;
      this.popupTitle = this.postManagementMapList[index].title;
      if (this.postManagementMapList[index].popup) {
        this.$refs.popupRef.openClick();
      } else {
        // 刷新和下架操作
        request
          .post(this.postManagementMapList[index].url, {
            id,
          })
          .then((res) => {
            this.$modal.msg("操作成功");
          })
          .catch((err) => {
            this.$modal.msg("操作失败");
          });
      }
      this.getPostManagementList();
    },

    //上押项目
    async gotoBetOn() {
      try {
        this.$modal.loading();
        request
          .post("/xiangmushe/setXiangmusheIsSy", {
            id: this.id,
            issyxm: 1,
          })
          .then((res) => {
            if (res.code == 200) {
              request
                .post("/xiangmushe/setXiangmusheSyjine", {
                  id: this.id,
                  money: this.$refs.depositRef.inputValue,
                })
                .then((res) => {
                  if (res.code == 200) {
                    console.log(res);
                    this.$modal.msg("上押成功");
                    this.$modal.closeLoading();
                    this.getPostManagementList();
                  } else {
                    this.$modal.msg(res.data);
                    this.getPostManagementList();
                  }
                });
            } else {
              this.$modal.msg("出错了");
            }
          });
      } catch (error) {
        this.$modal.msg("出错了");
        this.$modal.closeLoading();
      }
    },

    // 自动刷新
    addRefreshClick() {
      if (
        this.$refs.refreshRef.refreshNum > 0 &&
        this.$refs.refreshRef.refreshInterval > 0
      ) {
        request
          .post("/xiangmushe/addShuaxin", {
            id: this.id,
            syshuaxinsy: this.$refs.refreshRef.refreshNum,
            sxpinlv: this.$refs.refreshRef.refreshInterval,
          })
          .then((res) => {
            this.$modal.msg("刷新成功");
          });
      } else {
        this.$modal.msg("刷新次数和间隔时间不能为空！");
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// page {
//   background-color: #eef1f8;
// }
.tab-list {
  display: flex;
  justify-content: space-around;
  .tab-item {
    text-align: center;
  }
}
.content {
  padding: 30rpx 20rpx;
  box-sizing: border-box;
}
.active {
  color: #4c9ffb;
}
/deep/ .uni-popup__wrapper {
  width: 100%;
}
.top-popup {
  // width: 600rpx;
  width: 90%;
  margin: 0 auto;
  padding: 20rpx 50rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20rpx;
  .top-popup-title {
    height: 80rpx;
    font-weight: bold;
  }
  .top-popup-text {
  }
  .top-popup-content {
    padding: 10rpx 10rpx;
    .top-popup-content-box {
      margin: 10rpx 0;
      .content-box-left {
        display: flex;
        align-items: center;
      }
      .content-box-right {
        color: #4c9ffb;
        display: flex;
        align-items: center;
      }
    }
  }
  .buy-top {
    margin-top: 20rpx;
  }
  .buy-top-left {
    background: #f3f2f7;
    width: 370rpx;
    height: 60rpx;
    border-radius: 50rpx;
    padding: 10rpx;
    box-sizing: border-box;
    input {
      font-size: 26rpx;
    }
  }
  .buy-top-right {
  }
}

.top-popup-btn {
  width: 100%;
  height: 70rpx;
  background: #4c9ffb;
  color: #fff;
  margin: 20rpx 0;
  border-radius: 10rpx;
}
.top-popup-close {
  margin-top: 20rpx;
}
.flushed-popup {
  width: 90%;
  height: auto;
  background: #fff;
  border-radius: 20rpx;
  margin: 0 auto;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  .flushed-title {
    font-weight: bold;
  }
  .space-around1 {
    display: flex;
    align-items: center;
    margin: 20rpx 0;
    font-size: 28rpx;
    .flushed-left {
      flex: 1 70rpx;
    }
    .flushed-middle {
      flex: 1 200rpx;
      width: 300rpx;
      height: 60rpx;
      background: #eef1f8;
      border-radius: 50rpx;
      padding: 10rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      input {
        font-size: 26rpx;
      }
    }
  }
  .flushed-right {
    margin-left: 20rpx;
    flex: 1;
  }
  .flushed-card {
    margin: 10rpx 0;

    .space {
      // margin: 20rpx 0;
      background: #ecf2fe;
      padding: 10rpx 15rpx;
      box-sizing: border-box;
      border-top-left-radius: 15rpx;
      border-top-right-radius: 15rpx;
      font-size: 26rpx;
      .flushed-card-left {
      }
      .flushed-card-right {
        color: #4c9ffb;
        font-size: 23rpx;
      }
    }
    .flushed-text {
      padding: 20rpx 10rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      color: #707074;
    }
  }
}
</style>

<style></style>
